<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="curtain">
      <div class="invert">
        <h2>Curtain Effect</h2>
      </div>
    </div>
  </body>
</html>

<style>
  :root {
    --minh: 98vh;
    --color1: wheat;
    --color2: midnightblue;
  }

  html {
    font-size: 60px;
  }

  .curtain {
    /** create the "split" background **/
    background-image: linear-gradient(
      to bottom,
      var(--color2) 50%,
      var(--color1) 50%
    );
  }

  /** add extra space to the bottom (need this for the "sticky" effect) **/
  .curtain::after {
    content: "";
    display: block;
    min-height: var(--minh);
  }

  .invert {
    /** make the content sticky **/
    position: sticky;
    top: 20px;

    /** blend the content with the contrast effect **/
    mix-blend-mode: difference;

    /** center the content **/
    display: flex;
    align-items: center;
    justify-content: center;

    /** set the minimum height of the section **/
    min-height: var(--minh);
  }

  h2 {
    /** set the color of the text **/
    color: var(--color1);
  }
</style>
